import { login, getUserInfo } from '@/api/sys'
import md5 from 'md5'
import { setItem, getItem, clear } from '@/utils/storage.js'
// 导入常量
import { TOKEN } from '@/constant'
import router, { resetRouter } from '@/router'
import { setTimeStamp } from '@/utils/auth.js'
export default {
  namespaced: true,
  state: () => ({
    // 可能出现的问题，刚加载页面或刷新页面时，同时需要携带token发请求，所以获取本地token的速度要及时，赶在请求之前
    token: getItem(TOKEN) || '',
    userInfo: {},
  }),
  mutations: {
    // 设置token
    setToken(state, token) {
      state.token = token
      setItem(TOKEN, token)
    },
    // 设置用户信息
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
  },
  actions: {
    // 登录
    login(context, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: md5(password),
        })
          //data
          .then((data) => {
            this.commit('user/setToken', data.token)
            // 跳转到首页
            router.push('/')
            // 保存登录时间戳
            setTimeStamp()
            resolve()
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    /**
     * 1. 获取用户信息,这里注意判断token是否有效，如果无效，直接跳转到登录页
     * 2. 刁民可能会手动修改token，所以需要判断token是否有效
     * 3. 如果刁民用正确的token获取完用户信息，在主页修改了token，那么无所谓，因为token保存在vuex中
     * 4. 然后刷新页面，那么就会出现问题，因为token保存在vuex中，刷新页面vuex就会被清空
     * 5. 所以需要在刷新页面的时候，重新获取token，并重新获取用户信息，自然会发现那个token是无效的，所以会跳转到登录页
     */

    // 获取用户信息
    async getUserInfo(context, userInfo) {
      let res = await getUserInfo()
      this.commit('user/setUserInfo', res)
      return res
    },

    // 退出登录
    logout(context) {
      // 清空token
      this.commit('user/setToken', '')
      // 清空用户信息
      this.commit('user/setUserInfo', {})
      // 清空本地存储
      clear()
      // 重置路由
      resetRouter()
      // TODO: 清理权限相关的数据
      // 跳转到登录页
      router.push('/login')
    },
  },
}
